<template>
  <div id="container"></div>
</template>


<script  setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import "echarts/map/js/world"

function earth3D() {
  const ROOT_PATH = "./images";

  var nameMap = {
    "Singapore Rep.": "新加坡",
    "Dominican Rep.": "多米尼加",
    Palestine: "巴勒斯坦",
    Bahamas: "巴哈马",
    "Timor-Leste": "东帝汶",
    Afghanistan: "阿富汗",
    "Guinea-Bissau": "几内亚比绍",
    "Côte d'Ivoire": "科特迪瓦",
    "Siachen Glacier": "锡亚琴冰川",
    "Br. Indian Ocean Ter.": "英属印度洋领土",
    Angola: "安哥拉",
    Albania: "阿尔巴尼亚",
    "United Arab Emirates": "阿联酋",
    Argentina: "阿根廷",
    Armenia: "亚美尼亚",
    "French Southern and Antarctic Lands": "法属南半球和南极领地",
    Australia: "澳大利亚",
    Austria: "奥地利",
    Azerbaijan: "阿塞拜疆",
    Burundi: "布隆迪",
    Belgium: "比利时",
    Benin: "贝宁",
    "Burkina Faso": "布基纳法索",
    Bangladesh: "孟加拉国",
    Bulgaria: "保加利亚",
    "The Bahamas": "巴哈马",
    "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
    Belarus: "白俄罗斯",
    Belize: "伯利兹",
    Bermuda: "百慕大",
    Bolivia: "玻利维亚",
    Brazil: "巴西",
    Brunei: "文莱",
    Bhutan: "不丹",
    Botswana: "博茨瓦纳",
    "Central African Rep.": "中非",
    Canada: "加拿大",
    Switzerland: "瑞士",
    Chile: "智利",
    China: "中国",
    "Ivory Coast": "象牙海岸",
    Cameroon: "喀麦隆",
    "Dem. Rep. Congo": "刚果民主共和国",
    Congo: "刚果",
    Colombia: "哥伦比亚",
    "Costa Rica": "哥斯达黎加",
    Cuba: "古巴",
    "N. Cyprus": "北塞浦路斯",
    Cyprus: "塞浦路斯",
    "Czech Rep.": "捷克",
    Germany: "德国",
    Djibouti: "吉布提",
    Denmark: "丹麦",
    Algeria: "阿尔及利亚",
    Ecuador: "厄瓜多尔",
    Egypt: "埃及",
    Eritrea: "厄立特里亚",
    Spain: "西班牙",
    Estonia: "爱沙尼亚",
    Ethiopia: "埃塞俄比亚",
    Finland: "芬兰",
    Fiji: "斐济",
    "Falkland Islands": "福克兰群岛",
    France: "法国",
    Gabon: "加蓬",
    "United Kingdom": "英国",
    Georgia: "格鲁吉亚",
    Ghana: "加纳",
    Guinea: "几内亚",
    Gambia: "冈比亚",
    "Guinea Bissau": "几内亚比绍",
    "Eq. Guinea": "赤道几内亚",
    Greece: "希腊",
    Greenland: "格陵兰",
    Guatemala: "危地马拉",
    "French Guiana": "法属圭亚那",
    Guyana: "圭亚那",
    Honduras: "洪都拉斯",
    Croatia: "克罗地亚",
    Haiti: "海地",
    Hungary: "匈牙利",
    Indonesia: "印度尼西亚",
    India: "印度",
    Ireland: "爱尔兰",
    Iran: "伊朗",
    Iraq: "伊拉克",
    Iceland: "冰岛",
    Israel: "以色列",
    Italy: "意大利",
    Jamaica: "牙买加",
    Jordan: "约旦",
    Japan: "日本",
    Kazakhstan: "哈萨克斯坦",
    Kenya: "肯尼亚",
    Kyrgyzstan: "吉尔吉斯斯坦",
    Cambodia: "柬埔寨",
    Korea: "韩国",
    Kosovo: "科索沃",
    Kuwait: "科威特",
    "Lao PDR": "老挝",
    Lebanon: "黎巴嫩",
    Liberia: "利比里亚",
    Libya: "利比亚",
    "Sri Lanka": "斯里兰卡",
    Lesotho: "莱索托",
    Lithuania: "立陶宛",
    Luxembourg: "卢森堡",
    Latvia: "拉脱维亚",
    Morocco: "摩洛哥",
    Moldova: "摩尔多瓦",
    Madagascar: "马达加斯加",
    Mexico: "墨西哥",
    Macedonia: "马其顿",
    Mali: "马里",
    Myanmar: "缅甸",
    Montenegro: "黑山",
    Mongolia: "蒙古",
    Mozambique: "莫桑比克",
    Mauritania: "毛里塔尼亚",
    Malawi: "马拉维",
    Malaysia: "马来西亚",
    Namibia: "纳米比亚",
    "New Caledonia": "新喀里多尼亚",
    Niger: "尼日尔",
    Nigeria: "尼日利亚",
    Nicaragua: "尼加拉瓜",
    Netherlands: "荷兰",
    Norway: "挪威",
    Nepal: "尼泊尔",
    "New Zealand": "新西兰",
    Oman: "阿曼",
    Pakistan: "巴基斯坦",
    Panama: "巴拿马",
    Peru: "秘鲁",
    Philippines: "菲律宾",
    "Papua New Guinea": "巴布亚新几内亚",
    Poland: "波兰",
    "Puerto Rico": "波多黎各",
    "Dem. Rep. Korea": "朝鲜",
    Portugal: "葡萄牙",
    Paraguay: "巴拉圭",
    Qatar: "卡塔尔",
    Romania: "罗马尼亚",
    Russia: "俄罗斯",
    Rwanda: "卢旺达",
    "W. Sahara": "西撒哈拉",
    "Saudi Arabia": "沙特阿拉伯",
    Sudan: "苏丹",
    "S. Sudan": "南苏丹",
    Senegal: "塞内加尔",
    "Solomon Is.": "所罗门群岛",
    "Sierra Leone": "塞拉利昂",
    "El Salvador": "萨尔瓦多",
    Somaliland: "索马里兰",
    Somalia: "索马里",
    Serbia: "塞尔维亚",
    Suriname: "苏里南",
    Slovakia: "斯洛伐克",
    Slovenia: "斯洛文尼亚",
    Sweden: "瑞典",
    Swaziland: "斯威士兰",
    Syria: "叙利亚",
    Chad: "乍得",
    Togo: "多哥",
    Thailand: "泰国",
    Tajikistan: "塔吉克斯坦",
    Turkmenistan: "土库曼斯坦",
    "East Timor": "东帝汶",
    "Trinidad and Tobago": "特里尼达和多巴哥",
    Tunisia: "突尼斯",
    Turkey: "土耳其",
    Tanzania: "坦桑尼亚",
    Uganda: "乌干达",
    Ukraine: "乌克兰",
    Uruguay: "乌拉圭",
    "United States": "美国",
    Uzbekistan: "乌兹别克斯坦",
    Venezuela: "委内瑞拉",
    Vietnam: "越南",
    Vanuatu: "瓦努阿图",
    "West Bank": "西岸",
    Yemen: "也门",
    "South Africa": "南非",
    Zambia: "赞比亚",
    Zimbabwe: "津巴布韦",
    Asia: "亚洲",
    Africa: "非洲",
    Europe: "欧洲",
    "North America": "北美洲",
    "South America": "南美洲",
    Oceania: "大洋洲",
  };
  var canvas = document.createElement("canvas");
  var myChart = echarts.init(canvas, null, {
    width: 4096,
    height: 2048,
  });

  /*
         图中相关城市经纬度,根据你的需求添加数据
         关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
         */
  var geoCoordMap = {
    南宁: [108.479, 23.1152],
    广州: [113.5107, 23.2196],
    重庆: [107.7539, 30.1904],
    芬兰: [24.909912, 60.169095],
    美国: [-100.696295, 33.679979],
    日本: [139.710164, 35.706962],
    韩国: [126.979208, 37.53875],
    瑞士: [7.445147, 46.956241],
    东南亚: [117.53244, 5.300343],
    澳大利亚: [135.193845, -25.304039],
    德国: [13.402393, 52.518569],
    英国: [-0.126608, 51.208425],
    加拿大: [-102.646409, 59.994255],
  };

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[1].name];
      var toCoord = geoCoordMap[dataItem[0].name];
      if (fromCoord && toCoord) {
        res.push([fromCoord, toCoord]);
      }
    }
    console.log(res);
    return res;
  };

  // 指定图表的配置项和数据
  var option = {
    backgroundColor: "#000",
    globe: {
      baseTexture: myChart,
      // baseTexture: ROOT_PATH + '/baseTexture.jpg',
      heightTexture: ROOT_PATH + "/heightTexture.jpg",
      shading: "realistic",
      // environment: ROOT_PATH + '/starfield.jpg',
      realisticMaterial: {
        roughness: 0.9,
      },
      postEffect: {
        enable: true,
      },
      // light: {
      //   main: {
      //     intensity: 5,
      //     shadow: true
      //   },
      //   ambientCubemap: {
      //     texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
      //     diffuseIntensity: 0.2
      //   }
      // }
      light: {
        ambient: {
          intensity: 1,
        },
        main: {
          intensity: 1,
        },
        
      },
      top: "middle",
      left: "center",
      displacementScale: 0,
      environment: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: "#00aaff", // 天空颜色
          },
          {
            offset: 0.7,
            color: "#998866", // 地面颜色
          },
          {
            offset: 1,
            color: "#998866", // 地面颜色
          },
        ],
        false
      ),
      viewControl: {
        distance: 240,
        autoRotate: true,
      },
    },
    series: [
      {
        type: "lines3D",
        effect: {
          show: true,
          period: 3, //速度
          trailLength: 0.1, //尾部阴影
        },
        lineStyle: {
          //航线的视图效果
          color: "#9ae5fc",
          width: 1,
          opacity: 0.6,
        },
        // convertData
        data: [
          [
            [-102.646409, 59.994255],
            [108.479, 23.1152],
          ],
          [
            [-100.696295, 33.679979],
            [108.479, 23.1152],
          ],
        ],
      },
    ],
  };

  //    // 使用刚指定的配置项和数据显示图表。
  myChart.setOption({
    backgroundColor: "rgba(3,28,72,1)",
    geo: {
      type: "map",
      map: "world",
      nameMap: nameMap,
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      boundingCoords: [
        [-180, 90],
        [180, -90],
      ],
      zoom: 0,
      roam: false,
      itemStyle: {
        borderColor: "#000d2d",
        normal: {
            areaColor: '#323c48', // 海域颜色
                borderColor: '#111' // 边界线颜色
        },
        emphasis: {
          areaColor: "#357cf8",
        },
      },
      label: {
        fontSize: 24,
      },
      regions: [
        {
          name: "中国",
          selected: true,
          itemStyle: {
            normal: {
              borderColor: "#b2a471",
            },
          },
        },
      ],
    },
    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 3,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          fontSize: 24,
          show: true,
          position: "right",
          formatter: "{b}",
        },
        itemStyle: {
          normal: {
            color: "#f5f802",
          },
        },
        data: [
          { name: "瑞士", value: [-102.646409, 59.994255], symbolSize: 20 },
          { name: "加拿大", value: [-100.696295, 33.679979], symbolSize: 20 },
        ],
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 3,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          normal: {
            show: true,
            position: "left",
            fontSize: 18,
            formatter: "{b}",
          },
        },
        itemStyle: {
          normal: {
            color: "#ff0000",
          },
        },
        data: [{ name: "南宁", value: [108.479, 23.1152], symbolSize: 20 }],
      },
    ],
  });

  echarts.init(document.getElementById("container")).setOption(option, true);
}

onMounted(() => {
  earth3D();
});
</script>

<style>
#container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>